<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .header{
            width:100%;
            height:20px;
            position:fixed;
            z-index:100;
        }
        .border1{
            border-bottom:1px solid #000;
        }
        .border05{
            border: 1px solid #000;
        }
    </style>
    <script>
        !function(win, doc){
            var html = doc.documentElement,
                dpr = win.devicePixelRatio || 1;
            function i() {
                var e = html.clientWidth / 3.75;
                html.style.fontSize = e + "px"
            }
            if(function e(){
                // 设置body font-size是14px
                doc.body ? doc.body.style.fontSize = "16px" :
                doc.addEventListener("DOMContentLoaded", e)
            }(), i(), win.addEventListener("resize", i),
            win.addEventListener("pageshow", function(e){
                e.persisted && i()
            }), dpr >= 2){
                var body = doc.createElement("body")
                    div = doc.createElement("div");
                div.style.border = ".5px solid transparent",
                    body.appendChild(div),
                    html.append(body),
                    console.log(div.offsetHeight)
                    1 === div.offsetHeight && html.classList.add("hairlines"),
                    html.removeChild(body)
            }
        }(window, document)
        
    </script>
</head>
<body>
    <div class="header">下拉刷新</div>
    <div class="container">
        <ul>
            <li>
                内容1
            </li>
            <li class="border05">
                内容2
            </li>
            <li>
                内容3
            </li>
            <li class="border1">
                内容4
            </li>
        </ul>
    </div>
</body>
</html>